<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>身份匹配</title>
        <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
        <script src="../../../CommonTool/commonNetWork.js"></script>
        <script src="../../../script/jquery.js"></script>
        <script src="../../../CommonTool/progress.js"></script>
        <script src="./IndentityCognition.js"></script>
    </head>
    <style>
        .ImageInfoBodyther {
            height: 17vw;
            margin: 0 auto;
            border: solid 2px rgb(245, 243, 164);
        }
        .ImageInfoBody {
            height: 20vw;
            margin: 0 auto;
            display: block;
            border: solid 2px rgb(245, 243, 164);
        }
        @media (min-width: 1240px) and (orientation: landscape) {
            .row-margin {
                margin-top: 3%;
            }
        }
    </style>
    <body>
        <header class="aui-bar aui-bar-nav" id="aui-header">
            <div class="aui-pull-left aui-btn" onclick="close_win();">
                <span class="aui-iconfont aui-icon-left"></span>返回
            </div>
            <div class="aui-title">基础-初级-身份认知-身份识别</div>
        </header>
        <section class="aui-grid">
            <div class="aui-row row-margin">
                <div class="aui-col-xs-3"></div>
                <div class="aui-col-xs-6" class="container">
                    <img
                        src="http://172.16.32.194/social/basic/1-身份认知/6/参照.png"
                        alt=""
                        class="ImageInfoBodyther"
                        data-name="other"
                        onclick="clickDisappear(this)"
                    />
                    <!-- <img src="http://172.16.32.194/commonButton/dong.gif" alt="" id="floatingImage1" class="float-image"> -->
                </div>
            </div>
            <div class="aui-row">
                <div class="aui-col-xs-1" style="padding: 2px"></div>
                <div class="aui-col-xs-10" style="border-bottom: 2px solid; padding: 1px"></div>
            </div>
            <div class="aui-row row-margin">
                <div class="aui-col-xs-3">
                    <img
                        src="http://172.16.32.194/social/basic/1-身份认知/6/1.png"
                        alt=""
                        class="ImageInfoBody"
                        data-name="right"
                        onclick="ClickSelect4(this)"
                        id="ImageRight"
                    />
                    <img
                        src="http://172.16.32.194/commonButton/dong.gif"
                        alt=""
                        id="floatingImage1"
                        class="float-image"
                    />
                </div>
                <div class="aui-col-xs-3">
                    <img
                        src="http://172.16.32.194/social/basic/1-身份认知/6/2.png"
                        alt=""
                        class="ImageInfoBody"
                        data-name="error1"
                        onclick="ClickSelect4(this)"
                        id="ImageError1"
                    />
                </div>
                <div class="aui-col-xs-3">
                    <img
                        src="http://172.16.32.194/social/basic/1-身份认知/6/3.png"
                        alt=""
                        class="ImageInfoBody"
                        data-name="error2"
                        onclick="ClickSelect4(this)"
                        id="ImageError2"
                    />
                </div>
                <div class="aui-col-xs-3 class="container"">
                <img
                    src="http://172.16.32.194/social/basic/1-身份认知/6/4.png"
                    alt=""
                    class="ImageInfoBody"
                    data-name="error3"
                    onclick="ClickSelect4(this)"
                    id="ImageError3"
                />
            </div>
            <div class="footbar">
                <p class="barLeft" onclick="toggleMenu()">第六关</p>
         <p class="barCenter">
            <div id="InitialButton" style="float:left;margin-left:4%;" onclick="InitialClick()">
                <img id="passImg" src="http://172.16.32.194/commonButton/加号.png" alt="">
            </div> 
                <div id="InitialButton1" style="float:left;margin-left:4%;display: none;" onclick="ShowInitialClick()">
                    <img id="passImg" src="http://172.16.32.194/commonButton/减号.png" alt="">
                </div> 
                <div id="InitialButton2" style="float:left; margin-left:3%;display: none;" >
                    <audio src="http://172.16.32.194/promptsound/找一样的.mp3"   id="audioBody"  controls autoplay ></audio>  
                    <img style="width: 2rem;height: 1.6rem;margin-top:12%" src="http://172.16.32.194/commonButton/播放2.png" alt="" onclick="ImgAudioClick()">
                </div> 
                <div id="InitialButton3" style="float:left;margin-left:4%;display: none;" >
                    <img id="passImg" src="http://172.16.32.194/commonButton/提示.png" alt="" onclick="TipsClick()">
                </div> 
                <div id="InitialButton4" style="float:left;margin-left:4%;display: none;">
                    <img style="width: 2rem;height:2rem;margin-top:6%" src="http://172.16.32.194/commonButton/刷新1.png" alt=""  onclick="ResetClick()">
                </div> 
             </p>
             <p class="barright">
                <img  src="http://172.16.32.194/commonButton/next1.png" alt=""  class="BarBottom" onclick="go_forward();">
            </p>
            <p class="barright">
                <img  src="http://172.16.32.194/commonButton/prev1.png" alt=""  class="BarBottom" onclick="next_forward();">
            </p>
            <!-- <p class="barright">
                <img style="width: 3.5rem;height: 1.5rem;margin-top:6%"  src="http://172.16.32.194/commonButton/pass1.png" onclick="passclick();">
            </p> -->
        </div>
    </section>
         <!-- 全部答对   -->
         <div class="backdrop_bg" id="backdrop_bgright" onclick="hideRightPopup()">
            <audio src="http://172.16.32.194/tipvideo/right1.mp3" id="audioBodyRight"></audio>
                <div class="backdrop_contentGif" >
                    <div id="backdrop_text"></div>
                </div>
        </div>
        <!-- 答错不得分 -->
        <div class="backdrop_bg" id="backdropMistake" onclick="hideMistake()">
            <audio src="http://172.16.32.194/tipvideo/error3.mp3" id="audioBodyMistake"></audio>
            <div class="backdrop_contentMistakeGif" >
                <div id="backdrop_text">
                </div>
            </div>
        </div>
             <!-- 通过 -->
 <div class="backdrop_bg" id="backdropPass">
    <audio src="http://172.16.32.194/commonButton/鼓掌音效.mp3" id="audioBodyPass"></audio>
    <div class="backdrop_contentPasseGif" >
    </div>
</div>
        <div class="menu" id="menu">
            <div class="menu-item" onclick="goto_page(1)">第一关</div>
            <div class="menu-item" onclick="goto_page(2)">第二关</div>
            <div class="menu-item" onclick="goto_page(3)">第三关</div>
            <div class="menu-item" onclick="goto_page(4)">第四关</div>
            <div class="menu-item" onclick="goto_page(5)">第五关</div>
            <div class="menu-item" onclick="goto_page(6)">第六关</div>
            <div class="menu-item" onclick="goto_page(7)">第七关</div>
            <div class="menu-item" onclick="goto_page(8)">第八关</div>
            <div class="menu-item" onclick="goto_page(9)">第九关</div>
            <div class="menu-item" onclick="goto_page(10)">第十关</div>
        </div>
    </body>
    <script>
        var token = "";
        var userid = "";
        var currentTimestamp = "";
        var operationName = "";
        var additionalInfo = "";
        var groupId = "";
        var scene = "基础";
        var sceneLevel = "初级";
        var courseType = "身份认知";
        var classSort = "6";
        var moodType="";
        var remarks = "身份识别";
        var classType = "学习";
        apiready = function () {
            document.getElementById("audioBody").style.display = "none";
            document.getElementById("floatingImage1").style.display = "none";
            token = api.pageParam.token;
            userid = api.pageParam.uid;
            groupId = api.pageParam.groupId;
            currentTimestamp = Date.now();
            operationName = "ing";
            additionalInfo = "";
            CommonNetWork();
        };
        function passclick() {
            // document.getElementById('backdropPass').style.display='block'
            // document.getElementById('audioBodyPass').play()
            document.querySelectorAll("audio").forEach((audio) => audio.pause());
            setTimeout(() => {
                api.openWin({
                    name: "IdentityMatching7",
                    url: "./IdentityMatching7.html",
                    pageParam: {
                        uid: userid,
                        token: token,
                        groupId: groupId,
                    },
                    reload: true,
                });
            }, 2);
            currentTimestamp = Date.now();
        operationName = 'ing'
        additionalInfo =""
        CommonNetWork();
        }
        function go_forward() {
            document.querySelectorAll("audio").forEach((audio) => audio.pause());
            currentTimestamp = Date.now();
            operationName = "end";
            additionalInfo = "";
            CommonNetWork();
            api.openWin({
                name: "IdentityMatching7",
                url: "./IdentityMatching7.html",
                pageParam: {
                    uid: userid,
                    token: token,
                    groupId: groupId,
                },
                reload: true,
            });
        }
        function next_forward() {
            document.querySelectorAll("audio").forEach((audio) => audio.pause());
            currentTimestamp = Date.now();
            operationName = "end";
            additionalInfo = "";
            CommonNetWork();
            api.openWin({
                name: "IdentityMatching5",
                url: "./IdentityMatching5.html",
                pageParam: {
                    uid: userid,
                    token: token,
                    groupId: groupId,
                },
                reload: true,
            });
        }
        function goto_page(number) {
            const pages = [
                "IdentityMatching1",
                "IdentityMatching2",
                "IdentityMatching3",
                "IdentityMatching4",
                "IdentityMatching5",
                "IdentityMatching6",
                "IdentityMatching7",
                "IdentityMatching8",
                "IdentityMatching9",
                "IdentityMatching10",
            ];

            var name = pages[number - 1];
            var url = "./" + name + ".html";

            document.querySelectorAll("audio").forEach((audio) => audio.pause());
            currentTimestamp = Date.now();
            operationName = "end";
            additionalInfo = "";
            CommonNetWork();
            api.openWin({
                name: name,
                url: url,
                pageParam: {
                    uid: userid,
                    token: token,
                    groupId: groupId,
                },
                reload: true,
            });
        }
        function toggleMenu() {
            var menu = document.getElementById("menu");
            if (menu.style.display === "none" || menu.style.display === "") {
                menu.style.display = "block";
            } else {
                menu.style.display = "none";
            }
        }
    </script>
</html>
